<template>
  <div>
    <!-- 确保ID与你的图表对应 -->
    <div id="echartszuo2" class="charts"></div>
  </div>
</template>

<script>
import * as echarts from "echarts"; // 确保已经安装了echarts并正确导入

export default {
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    this.initEcharts();
    var numss = 1;
    this.timer = setInterval(() => {
      if (this.timer) {
        if (numss - 1 == 0) {
          this.initEcharts();
          numss = numss + 1;
        } else if (numss - 2 == 0) {
          this.initEcharts1();
          numss = numss + 1;
        } else if (numss - 3 == 0) {
          this.initEcharts2();
          numss = numss + 1;
        } else {
          this.initEcharts3();
          numss = numss - 3;
        }
      }
    }, 1500);
    window.addEventListener("resize", this.handleWindowResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleWindowResize);
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    initEcharts() {
      const myChart = echarts.init(document.getElementById("echartszuo2"));
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}  <br/>{c}个",
        },
        legend: {
          x: "center",
          y: "2%",
          data: ["36V", "48V", "60V", "72V"],
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        calculable: true,
        series: [
          {
            name: "电池类型",
            type: "pie",
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [51, 80],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ["50%", "20%"],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: "area",
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{c}个",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length2: 1,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                value: 600,
                name: "36V",
                itemStyle: {
                  normal: {
                    color: "#33b565",
                  },
                },
              },
              {
                value: 1100,
                name: "48V",
                itemStyle: {
                  normal: {
                    color: "#20cc98",
                  },
                },
              },
              {
                value: 1200,
                name: "60V",
                itemStyle: {
                  normal: {
                    color: "#2089cf",
                  },
                },
              },
              {
                value: 1300,
                name: "72V",
                itemStyle: {
                  normal: {
                    color: "#205bcf",
                  },
                },
              },

              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    initEcharts1() {
      const myChart = echarts.init(document.getElementById("echartszuo2"));
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}  <br/>{c}个",
        },
        legend: {
          x: "center",
          y: "2%",
          data: ["36V", "48V", "60V", "72V"],
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        calculable: true,
        series: [
          {
            name: "电池类型",
            type: "pie",
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [51, 80],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ["50%", "20%"],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: "area",
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{c}个",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length2: 1,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                value: 1300,
                name: "36V",
                itemStyle: {
                  normal: {
                    color: "#33b565",
                  },
                },
              },
              {
                value: 900,
                name: "48V",
                itemStyle: {
                  normal: {
                    color: "#20cc98",
                  },
                },
              },
              {
                value: 800,
                name: "60V",
                itemStyle: {
                  normal: {
                    color: "#2089cf",
                  },
                },
              },
              {
                value: 600,
                name: "72V",
                itemStyle: {
                  normal: {
                    color: "#205bcf",
                  },
                },
              },

              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    initEcharts2() {
      const myChart = echarts.init(document.getElementById("echartszuo2"));
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}  <br/>{c}个",
        },
        legend: {
          x: "center",
          y: "2%",
          data: ["36V", "48V", "60V", "72V"],
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        calculable: true,
        series: [
          {
            name: "电池类型",
            type: "pie",
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [51, 80],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ["50%", "20%"],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: "area",
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{c}个",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length2: 1,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                value: 500,
                name: "36V",
                itemStyle: {
                  normal: {
                    color: "#33b565",
                  },
                },
              },
              {
                value: 1100,
                name: "48V",
                itemStyle: {
                  normal: {
                    color: "#20cc98",
                  },
                },
              },
              {
                value: 800,
                name: "60V",
                itemStyle: {
                  normal: {
                    color: "#2089cf",
                  },
                },
              },
              {
                value: 1600,
                name: "72V",
                itemStyle: {
                  normal: {
                    color: "#205bcf",
                  },
                },
              },

              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    initEcharts3() {
      const myChart = echarts.init(document.getElementById("echartszuo2"));
      const option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
          trigger: "item",
          formatter: "{b}  <br/>{c}个",
        },
        legend: {
          x: "center",
          y: "2%",
          data: ["36V", "48V", "60V", "72V"],
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        calculable: true,
        series: [
          {
            name: "电池类型",
            type: "pie",
            //起始角度，支持范围[0, 360]
            startAngle: 0,
            //饼图的半径，数组的第一项是内半径，第二项是外半径
            radius: [51, 80],
            //支持设置成百分比，设置成百分比时第一项是相对于容器宽度，第二项是相对于容器高度
            center: ["50%", "20%"],
            //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：
            // 'radius' 面积展现数据的百分比，半径展现数据的大小。
            //  'area' 所有扇区面积相同，仅通过半径展现数据大小
            roseType: "area",
            //是否启用防止标签重叠策略，默认开启，圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                formatter: "{c}个",
              },
              emphasis: {
                show: true,
              },
            },
            labelLine: {
              normal: {
                show: true,
                length2: 1,
              },
              emphasis: {
                show: true,
              },
            },
            data: [
              {
                value: 1500,
                name: "36V",
                itemStyle: {
                  normal: {
                    color: "#33b565",
                  },
                },
              },
              {
                value: 500,
                name: "48V",
                itemStyle: {
                  normal: {
                    color: "#20cc98",
                  },
                },
              },
              {
                value: 600,
                name: "60V",
                itemStyle: {
                  normal: {
                    color: "#2089cf",
                  },
                },
              },
              {
                value: 1300,
                name: "72V",
                itemStyle: {
                  normal: {
                    color: "#205bcf",
                  },
                },
              },

              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
              {
                value: 0,
                name: "",
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },

    handleWindowResize() {
      this.$nextTick(() => {
        this.myCharts.forEach((chart) => chart.resize());
      });
    },
  },
  data() {
    return {
      myCharts: [], // 用于存储所有echarts实例，以便在窗口调整大小时重新调整图表
    };
  },
};
</script>
